<template>
  <div>
    <el-tabs v-model="tabCurr" @tab-click="handleClick">
      <el-tab-pane label="我的车库" name="myGarage">
        <el-table v-loading="loading" :data="pageData" height="500px">
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="150"
          />
          <!-- <el-table-column
            label="用户名"
            align="center"
            width="150"
            prop="loginName"
          />
          <el-table-column
            label="用户昵称"
            width="120"
            align="center"
            prop="nickName"
          />
          <el-table-column
            label="头像"
            align="center"
            prop="headImg"
            width="120"
          >
            <template #default="scope">
              <span><img :src="scope.row.headImg" style="height: 60px" /></span>
            </template>
          </el-table-column> -->

          <el-table-column label="车辆正面照" align="center" width="120">
            <template #default="scope">
              <span
                ><img :src="scope.row.frontImg" style="height: 60px"
              /></span>
            </template>
          </el-table-column>
          <el-table-column label="背面照" align="center" width="120">
            <template #default="scope">
              <span
                ><img :src="scope.row.frontImg" style="height: 60px"
              /></span>
            </template>
          </el-table-column>
          <el-table-column label="行驶证" align="center" width="120">
            <template #default="scope">
              <span
                ><img :src="scope.row.drivingImg" style="height: 60px"
              /></span>
            </template>
          </el-table-column>

          <el-table-column
            label="状态"
            align="center"
            prop="status"
            width="120"
          >
            <template #default="scope">
              <span v-if="scope.row.status == 0"> 待认证 </span>
              <span v-if="scope.row.status == 1"> 已认证 </span>

              <span v-if="scope.row.status == 2"> 认证驳回 </span>
            </template>
          </el-table-column>

          <el-table-column
            label="认证车辆品牌"
            align="center"
            prop="brandName"
            width="200"
          />
          <el-table-column
            label="车型"
            width="120"
            align="center"
            prop="model"
          />
          <el-table-column
            label="认证申请时间"
            align="center"
            prop="createDate"
            width="200"
          />

          <el-table-column
            label="备注"
            align="center"
            prop="remark"
            width="200"
          />
        </el-table>

        <pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:page="querySubParams.pageNum"
          v-model:limit="querySubParams.pageSize"
          @pagination="handleQuery"
        />
      </el-tab-pane>
      <el-tab-pane label="我的关注" name="myFollow">
        <el-table v-loading="loading" :data="pageData" height="500px">
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="150"
          />

          <el-table-column align="center" label="用户名" prop="loginName" />
          <el-table-column label="用户昵称" align="center" prop="nickName" />
          <el-table-column
            label="头像"
            align="center"
            prop="headImg"
            width="120"
          >
            <template #default="scope">
              <span><img :src="scope.row.headImg" style="height: 60px" /></span>
            </template>
          </el-table-column>

          <el-table-column label="关注时间" align="center" prop="createDate" />
        </el-table>

        <pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:page="querySubParams.pageNum"
          v-model:limit="querySubParams.pageSize"
          @pagination="handleQuery"
        />
      </el-tab-pane>
      <el-tab-pane label="我的分享" name="myShare">
        <el-table v-loading="loading" :data="pageData" height="500px">
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="150"
          />

          <!-- <el-table-column align="center" label="用户名" prop="loginName" />
          <el-table-column label="用户昵称" align="center" prop="nickName" />
          <el-table-column
            label="头像"
            align="center"
            prop="headImg"
            width="120"
          >
            <template #default="scope">
              <span><img :src="scope.row.headImg" style="height: 60px" /></span>
            </template>
          </el-table-column> -->
          <el-table-column
            label="分享内容"
            align="center"
            prop="headImg"
            width="120"
          >
            <template #default="scope">
              <span><img :src="scope.row.attUrl" style="height: 60px" /></span>
            </template>
          </el-table-column>

          <el-table-column label="分享时间" align="center" prop="createDate" />
        </el-table>

        <pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:page="querySubParams.pageNum"
          v-model:limit="querySubParams.pageSize"
          @pagination="handleQuery"
        />
      </el-tab-pane>
      <el-tab-pane label="我的访客" name="myVisitor">
        <el-table v-loading="loading" :data="pageData" height="500px">
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="150"
          />

          <el-table-column align="center" label="访客名" prop="loginName" />
          <el-table-column label="访客昵称" align="center" prop="nickName" />
          <el-table-column
            label="头像"
            align="center"
            prop="headImg"
            width="120"
          >
            <template #default="scope">
              <span><img :src="scope.row.headImg" style="height: 60px" /></span>
            </template>
          </el-table-column>

          <el-table-column label="访问时间" align="center" prop="createDate" />
        </el-table>

        <pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:page="querySubParams.pageNum"
          v-model:limit="querySubParams.pageSize"
          @pagination="handleQuery"
        />
      </el-tab-pane>
      <el-tab-pane label="我的广告">
        <el-table v-loading="loading" :data="pageData" height="500px">
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="150"
          />
          <el-table-column align="center" label="用户名" prop="loginName" />
          <el-table-column label="用户昵称" align="center" prop="nickName" />
          <el-table-column
            label="头像"
            align="center"
            prop="headImg"
            width="120"
          >
            <template #default="scope">
              <span><img :src="scope.row.headImg" style="height: 60px" /></span>
            </template>
          </el-table-column>
          <el-table-column label="主图" align="center" prop="headImg">
            <template #default="scope">
              <span><img :src="scope.row.headImg" style="height: 60px" /></span>
            </template>
          </el-table-column>

          <el-table-column label="发布状态" align="center" prop="createDate" />

          <el-table-column
            label="申请发布时间"
            align="center"
            prop="createDate"
          />
        </el-table>

        <pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:page="querySubParams.pageNum"
          v-model:limit="querySubParams.pageSize"
          @pagination="handleQuery"
        />
      </el-tab-pane>
      <el-tab-pane label="我的点赞">
        <el-table v-loading="loading" :data="pageData" height="500px">
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="150"
          />

          <el-table-column align="center" label="点赞用户名" prop="loginName" />
          <el-table-column
            label="点赞用户昵称"
            align="center"
            prop="nickName"
          />
          <el-table-column label="头像" align="center" prop="headImg">
            <template #default="scope">
              <span><img :src="scope.row.headImg" style="height: 60px" /></span>
            </template>
          </el-table-column>

          <el-table-column label="点赞时间" align="center" prop="createDate" />
        </el-table>

        <pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:page="querySubParams.pageNum"
          v-model:limit="querySubParams.pageSize"
          @pagination="handleQuery"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import {
  getMyGaragePage,
  getMyFollowPage,
  getMySharePage,
  getMyVisitorPage,
  getMyAdPage,
  getMyLikePage,
} from "@/api/user";
import { UserForm, UserQuery, UserPageVO } from "@/api/user/types";
const pageData = ref<UserPageVO[]>(); // 用户分页数据

const userId = defineProps(["userId"]);
const total = ref(0); // 数据总数
const tabCurr = ref("myGarage");
const loading = ref(false); //  加载状态
const querySubParams = reactive<UserQuery>({
  pageNum: 1,
  pageSize: 10,
  userId: 0,
});

const getMyGarageList = () => {
  getMyGaragePage(querySubParams)
    .then(({ data }) => {
      pageData.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
};

const getMyVisitor = () => {
  getMyVisitorPage(querySubParams)
    .then(({ data }) => {
      pageData.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
};

const getMyLike = () => {
  getMyLikePage(querySubParams)
    .then(({ data }) => {
      pageData.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
};

const getMyFollow = () => {
  getMyFollowPage(querySubParams)
    .then(({ data }) => {
      pageData.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
};

const getMyAd = () => {
  getMyAdPage(querySubParams)
    .then(({ data }) => {
      pageData.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
};

const getMySharePageList = () => {
  getMySharePage(querySubParams)
    .then(({ data }) => {
      pageData.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
};

// 点击事件
const handleClick = (tab: any) => {
  const convert = JSON.parse(JSON.stringify(tab.props));

  if (convert.name === "myGarage") {
    getMyGarageList();
  } else if (convert.name === "myVisitor") {
    getMyVisitor();
  } else if (convert.name === "myFollow") {
    getMyFollow();
  } else if (convert.name === "myAd") {
    getMyAd();
  } else if (convert.name === "myLike") {
    getMyLike();
  } else if (convert.name === "myShare") {
    getMySharePageList();
  }
};

const handleQuery = () => {};

onMounted(() => {
  querySubParams.userId = userId.userId;
  getMyGarageList();
});
</script>
